<template>
  <common-card class="core-competencies">
    <template #title>核心素养</template>
    <!-- <template #operate
      ><span class="operate"
        ><label class="operate__icon"></label
        ><span class="operate__desc">导出</span></span
      ></template
    > -->
    <div class="content">
      <div
        v-show="dataList.length"
        class="chart"
        ref="chartRef"
        style="width: 448px; height: 318px"
      ></div>
      <div v-show="!dataList.length" style="width: 448px; height: 318px">
        <no-data></no-data>
      </div>
      <div class="table">
        <a-table
          :showSorterTooltip="false"
          :columns="STUDENT_CORE"
          :dataSource="dataList"
          :pagination="false"
          :scroll="{ y: 300 }"
        >
          <template v-slot:bodyCell="{ column, record }">
            <template v-if="column.dataIndex === 'ability_name'">
              {{ record.ability_right_rate.ability_name }}</template
            >
            <template v-if="column.dataIndex === 'right_rate'">
              <span
                :style="{
                  color:
                    record.ability_right_rate.right_rate <
                    record.grade_right_rate
                      ? '#FF7B73'
                      : ''
                }"
                >{{ getPercent(record.ability_right_rate.right_rate) }}%</span
              ></template
            >
            <template v-if="column.dataIndex === 'class_right_rate'">
              <span
                :style="{
                  color:
                    record.class_right_rate < record.grade_right_rate
                      ? '#FF7B73'
                      : ''
                }"
                >{{ getPercent(record.class_right_rate) }}%</span
              >
            </template>
          </template>
        </a-table>
      </div>
    </div>
  </common-card>
</template>
<script setup>
import CommonCard from '../components/CommonCard.vue'
import { getStudentCore } from '@/apis/situation-report/index'
import { useSituationReport } from '@/stores/situation-report'
import { getPercent } from '../utils'
import useCharts from '@/utils/echart/index'
import { ref, watchEffect, computed } from 'vue'
const props = defineProps({
  studentId: {
    default: '',
    type: String
  }
})
const chartRef = ref(null)

// 学生学情-核心素养
const STUDENT_CORE = computed(() => {
  return [
    {
      title: '素养名称',
      align: 'center',
      dataIndex: 'ability_name',
      key: 'ability_name'
    },
    {
      title: '学生正确率',
      align: 'center',
      dataIndex: 'right_rate',
      key: 'right_rate',
      sorter: (a, b) => a.right_rate - b.right_rate
    },
    {
      title: '班级正确率',
      align: 'center',
      dataIndex: 'class_right_rate',
      key: 'class_right_rate',
      sorter: (a, b) => a.class_right_rate - b.class_right_rate
    },
    {
      title: '未考查素养',
      align: 'center',
      dataIndex: 'no_publish_ability',
      key: 'no_publish_ability',
      customCell: (_, index) => {
        if (index === 0) {
          return { rowSpan: dataList.value.length }
        }
        return { rowSpan: 0 }
      },
      customRender: () => {
        return noPublishAbility.value.join('、')
      }
    }
  ]
})

const { setOption, removeInstance } = useCharts(chartRef, true, true, 'light')

const getOption = () => {
  const option = {
    color: ['#60DC99', '#5CB2FF'],
    tooltip: {
      position: [0, 0],
      padding: [12, 16],
      borderRadius: 8,
      borderColor: '#fff',
      axisPointer: {
        type: 'shadow',
        label: {
          fontSize: 14,
          shadowColor: 'rgba(139, 200, 254, 0.15)'
        }
      },
      formatter: params => {
        let res = `<span style="font-weight: 700;">${params.name}</span><br>`
        dataList.value.forEach(item => {
          res += `<span style="display: flex; align-items: center; padding-top: 16px; justify-content: space-between;">
            <span style="width: fit-content; display: inline-flex; align-items: center; gap: 4px">
              <span style="display: inline-block; width: 12px; height: 12px; border-radius: 200px; background: ${
                params.color
              };"></span>
            <span style="color: rgba(4, 11, 26, 0.75);">${
              item.ability_right_rate.ability_name
            }</span>
          </span>
          <span style="color: rgba(4, 11, 26, 0.5)">${
            params.name === '学生正确率'
              ? getPercent(item.ability_right_rate.right_rate)
              : getPercent(item.class_right_rate)
          }%</span>
         </span>`
        })
        return res
      }
    },
    legend: {
      itemGap: 22,
      bottom: -5
    },
    radar: [
      {
        indicator:
          dataList.value?.map(item => {
            return {
              text: item.ability_right_rate.ability_name
            }
          }) || [],
        center: ['45%', '47%'],
        startAngle: 90,
        // 指示轴的分割段数
        splitNumber: 4,
        shape: 'circle',
        axisName: {
          color: '#777',
          formatter: function (value) {
            return value
              ? value.length > 6
                ? value.substring(0, 5) + '...'
                : value
              : '' // 截断超过长度的部分并添加省略号
          }
        },
        axisLine: {
          lineStyle: {
            color: 'rgba(24, 24, 24, 0.1)'
          }
        },
        splitArea: {
          show: false
        },
        // 坐标轴在grid区域的分割线
        splitLine: {
          lineStyle: {
            color: 'rgba(24, 24, 24, 0.1)'
          }
        },
        radius: ['0%', '66%']
      }
    ],
    series: [
      {
        type: 'radar',
        emphasis: {
          lineStyle: {
            width: 4
          }
        },
        data: [
          {
            value:
              dataList.value?.map(item =>
                getPercent(item.ability_right_rate.right_rate)
              ) || [],
            name: '学生正确率'
          },
          {
            value:
              dataList.value?.map(item => getPercent(item.class_right_rate)) ||
              [],
            name: '班级正确率'
          }
        ]
      }
    ]
  }
  return option
}

const noPublishAbility = ref([])
const situationReport = useSituationReport()
const dataList = ref([])
const getData = async () => {
  const params = {
    ...situationReport.search,
    student_id: props.studentId
  }
  const { data } = await getStudentCore(params)
  dataList.value = data?.list || []
  noPublishAbility.value = data?.no_publish_ability || []
}

watchEffect(async () => {
  if (situationReport.search && props.studentId) {
    await getData()
    if (dataList.value.length) {
      setOption(getOption())
    } else {
      removeInstance()
    }
  }
})
</script>
<style lang="less" scoped>
@import '../style.less';

.core-competencies {
  .no-data {
    height: 222px;
  }

  .operate {
    &__icon {
      background: url('@/assets/images/situation-report/export.png') no-repeat
        center/cover;
      margin-right: 8px;
    }
  }

  .content {
    display: flex;

    .chart {
      width: fit-content;
    }

    .table {
      flex: 1;
    }
  }
}
</style>
